<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>液压油箱液位计算器</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .calculator-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 30px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 40px;
            color: #2c3e50;
        }
        .result-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin-top: 30px;
            text-align: center;
        }
        .result-value {
            font-size: 2.5em;
            font-weight: bold;
            margin: 10px 0;
        }
        .component-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .btn-add-component {
            margin-top: 10px;
        }
        .component-item {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            border-left: 4px solid #007bff;
        }
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="calculator-container">
            <div class="header">
                <h1><i class="fas fa-calculator"></i> 液压油箱液位计算器</h1>
                <p class="text-muted">5606航空液压油专用计算工具</p>
            </div>

            <form id="calculatorForm">
                <div class="row">
                    <div class="col-md-6">
                        <label class="form-label">工作温度 (°C)</label>
                        <input type="number" class="form-control" id="temperature" value="20" step="0.1" min="-40" max="150">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">工作压力 (bar)</label>
                        <input type="number" class="form-control" id="pressure" value="1.013" step="0.1" min="0.1" max="350">
                    </div>
                </div>

                <div class="component-section">
                    <h5><i class="fas fa-cogs"></i> 液压元件配置</h5>
                    <div id="componentsList">
                        <!-- 动态添加的元件将显示在这里 -->
                    </div>
                    <button type="button" class="btn btn-outline-primary btn-add-component" onclick="addComponent()">
                        <i class="fas fa-plus"></i> 添加元件
                    </button>
                </div>

                <button type="submit" class="btn btn-primary btn-lg w-100">
                    <i class="fas fa-calculator"></i> 计算液位
                </button>
            </form>

            <div class="loading">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">计算中...</span>
                </div>
                <p class="mt-2">正在计算液位变化...</p>
            </div>

            <div id="result" class="result-card" style="display: none;">
                <h4><i class="fas fa-chart-line"></i> 计算结果</h4>
                <div class="row">
                    <div class="col-md-6">
                        <h6>当前液位</h6>
                        <div class="result-value" id="currentLevel">--</div>
                        <small>升</small>
                    </div>
                    <div class="col-md-6">
                        <h6>液位变化</h6>
                        <div class="result-value" id="levelChange">--</div>
                        <small>升</small>
                    </div>
                </div>
                <hr>
                <div class="row text-start">
                    <div class="col-md-6">
                        <small><i class="fas fa-thermometer-half"></i> 温度影响: <span id="baseChange">--</span> L</small>
                    </div>
                    <div class="col-md-6">
                        <small><i class="fas fa-battery-three-quarters"></i> 蓄能器影响: <span id="accumulatorEffect">--</span> L</small>
                    </div>
                    <div class="col-md-6">
                        <small><i class="fas fa-cog"></i> 油缸影响: <span id="cylinderEffect">--</span> L</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 元件模板 -->
    <template id="accumulatorTemplate">
        <div class="component-item">
            <div class="row">
                <div class="col-md-8">
                    <h6><i class="fas fa-battery-three-quarters"></i> 蓄能器</h6>
                </div>
                <div class="col-md-4 text-end">
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeComponent(this)">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label">容积 (L)</label>
                    <input type="number" class="form-control" name="accumulator_volume" value="1" step="0.1" min="0.1">
                </div>
                <div class="col-md-6">
                    <label class="form-label">预充压力 (bar)</label>
                    <input type="number" class="form-control" name="accumulator_precharge" value="70" step="1" min="1">
                </div>
            </div>
            <input type="hidden" name="component_type" value="accumulator">
        </div>
    </template>

    <template id="cylinderTemplate">
        <div class="component-item">
            <div class="row">
                <div class="col-md-8">
                    <h6><i class="fas fa-cog"></i> 油缸</h6>
                </div>
                <div class="col-md-4 text-end">
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeComponent(this)">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label class="form-label">缸径 (mm)</label>
                    <input type="number" class="form-control" name="cylinder_bore" value="50" step="1" min="10">
                </div>
                <div class="col-md-3">
                    <label class="form-label">杆径 (mm)</label>
                    <input type="number" class="form-control" name="cylinder_rod" value="25" step="1" min="5">
                </div>
                <div class="col-md-3">
                    <label class="form-label">行程 (mm)</label>
                    <input type="number" class="form-control" name="cylinder_stroke" value="200" step="10" min="10">
                </div>
                <div class="col-md-3">
                    <label class="form-label">类型</label>
                    <select class="form-select" name="cylinder_symmetric">
                        <option value="true">对称</option>
                        <option value="false">非对称</option>
                    </select>
                </div>
            </div>
            <input type="hidden" name="component_type" value="cylinder">
        </div>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script>
        let componentCount = 0;

        function addComponent() {
            const type = prompt('请选择元件类型:\n1. 蓄能器\n2. 油缸\n请输入数字1或2:');
            
            let template, html;
            if (type === '1') {
                template = document.getElementById('accumulatorTemplate');
                html = template.innerHTML;
            } else if (type === '2') {
                template = document.getElementById('cylinderTemplate');
                html = template.innerHTML;
            } else {
                alert('请输入有效的数字1或2');
                return;
            }
            
            const div = document.createElement('div');
            div.innerHTML = html;
            div.id = `component-${componentCount++}`;
            document.getElementById('componentsList').appendChild(div);
        }

        function removeComponent(button) {
            const component = button.closest('.component-item').parentNode;
            component.remove();
        }

        document.getElementById('calculatorForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const temperature = parseFloat(document.getElementById('temperature').value);
            const pressure = parseFloat(document.getElementById('pressure').value);
            
            const components = [];
            const componentItems = document.querySelectorAll('.component-item');
            
            componentItems.forEach(item => {
                const type = item.querySelector('[name="component_type"]').value;
                
                if (type === 'accumulator') {
                    components.push({
                        type: 'accumulator',
                        volume: parseFloat(item.querySelector('[name="accumulator_volume"]').value),
                        precharge: parseFloat(item.querySelector('[name="accumulator_precharge"]').value)
                    });
                } else if (type === 'cylinder') {
                    components.push({
                        type: 'cylinder',
                        bore: parseFloat(item.querySelector('[name="cylinder_bore"]').value),
                        rod: parseFloat(item.querySelector('[name="cylinder_rod"]').value),
                        stroke: parseFloat(item.querySelector('[name="cylinder_stroke"]').value),
                        symmetric: item.querySelector('[name="cylinder_symmetric"]').value === 'true'
                    });
                }
            });

            // 显示加载状态
            document.querySelector('.loading').style.display = 'block';
            document.getElementById('result').style.display = 'none';

            try {
                const response = await fetch('/calculate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        temperature,
                        pressure,
                        components
                    })
                });

                const data = await response.json();
                
                if (data.success) {
                    document.getElementById('currentLevel').textContent = data.data.current_level;
                    document.getElementById('levelChange').textContent = data.data.level_change;
                    document.getElementById('baseChange').textContent = data.data.base_change;
                    document.getElementById('accumulatorEffect').textContent = data.data.accumulator_effect;
                    document.getElementById('cylinderEffect').textContent = data.data.cylinder_effect;
                    document.getElementById('result').style.display = 'block';
                } else {
                    alert('计算错误: ' + data.error);
                }
            } catch (error) {
                alert('网络错误: ' + error.message);
            } finally {
                document.querySelector('.loading').style.display = 'none';
            }
        });
    </script>
</body>
</html>
